<script lang="ts" setup>

// 从pinia里操作折叠状态
import { storeToRefs } from 'pinia'
import useSidebarStatusInfoStore from '@/stores/sidebarStatus'
const sidebarStatusInfo = useSidebarStatusInfoStore();
const { isCollapse } = storeToRefs(sidebarStatusInfo)
const toggle = () => {
    sidebarStatusInfo.toggleCollapse();
}

// 头像路径
import { ref } from 'vue';
const circleUrl = ref("/images/avatar.jpg");

// 全屏
const isFullscreen = ref(false);
const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
        document.documentElement.requestFullscreen();
    } else {
        document.exitFullscreen();
    }
    isFullscreen.value = !isFullscreen.value;
}

// 面包屑动态列表
import { onMounted, watch } from 'vue';
import { useRoute } from 'vue-router'
const route = useRoute()
const pathList = ref()
 
const getCurrentPath = () => {
    console.log(route.matched);
    pathList.value = route.matched.filter(item => item.meta && item.meta.title);
}
 
onMounted(() => {
    getCurrentPath();
})
 
watch(route, (to, from) => {
    pathList.value = to.matched.filter(item => item.meta && item.meta.title);
    console.log(to);
    console.log(from);
}, { immediate: true });

</script>

<template>
    <div class="toolbar">
        <div class="left">
            <el-icon v-show="isCollapse" @click="toggle" class="nav-icon">
                <Expand />
            </el-icon>
            <el-icon v-show="!isCollapse" @click="toggle" class="nav-icon">
                <Fold />
            </el-icon>
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">
                <!-- <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a href="/">promotion management</a>
                </el-breadcrumb-item>
                <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
                <el-breadcrumb-item :to="item.path" v-for="item in pathList" :key="item.id">{{ item.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="right">
            <el-icon v-show="!isFullscreen" @click="toggleFullscreen" class="nav-icon screen-icon">
                <FullScreen />
            </el-icon>
            <el-icon v-show="isFullscreen" @click="toggleFullscreen" class="nav-icon screen-icon">
                <Rank />
            </el-icon>

            <el-badge :value="200" :max="99" type="primary" class="nav-icon inform-icon">
                <el-icon>
                    <BellFilled />
                </el-icon>
            </el-badge>

            <div class="user-info">
                <el-avatar :size="40" :src="circleUrl" />
                <span class="username">whx</span>
            </div>
            <el-dropdown>
                <div class="gear-wrapper">
                    <el-icon class="gear-icon">
                        <Setting />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>a</el-dropdown-item>
                        <el-dropdown-item>b</el-dropdown-item>
                        <el-dropdown-item>c</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    box-sizing: border-box;
    background-color: #242f42;
    /* 添加深色背景 */
}

:deep(.el-breadcrumb) {
  color: #fff; // 设置面包屑默认颜色
  
  .el-breadcrumb__item {
    .el-breadcrumb__inner {
      color: #fff; // 设置面包屑文字颜色
      
      &.is-link, 
      a {
        color: #fff; // 设置链接颜色
        &:hover {
          color: #409EFF; // 设置鼠标悬停颜色
        }
      }
    }
    
    &:last-child .el-breadcrumb__inner {
      color: #fff; // 设置最后一项颜色（非链接）
    }
  }
}

.left,
.right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-icon {
    font-size: 24px;
    color: #fff;
    cursor: pointer;
    margin: 0 5px;
    transition: color 0.3s ease;

    &:hover {
        color: #409EFF;
    }
}

.right {
    .screen-icon {
        font-size: 20px;
    }

    .inform-icon {
        font-size: 20px;
        margin-top: 4px;
    }

    .gear-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 4px;
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .gear-icon {
            font-size: 20px;
            color: #fff;
            transition: transform 0.5s ease, color 0.3s ease;

            &:hover {
                transform: rotate(360deg);
                color: #409EFF;
            }
        }
    }

    .user-info {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 10px;

        .username {
            font-size: 16px;
            color: #fff;
            font-weight: 500;
        }
    }
}
</style>